{%extends "base.html"%}
{%block title%}
主页
{%endblock%}
{%block body%}

<script>
    let main;
    $(document).ready(() => {
        main = new Vue({
            el: "#main",
            delimiters: ['{[', ']}'],
            mixins: [baseMixin],
            data: {
                data: null,
                done: false, hitokoto: {

                }
            }, methods: {

            }, mounted() {
                axios.post("/api/home_page").then(data => {
                    let pageData = data.data;
                    pageData = pageData.data;
                    console.log(pageData);
                    if (pageData.code) {
                        showErrorModal(pageData.message);
                        return;
                    }
                    main.data = pageData;
                    main.done = true;
                });
                axios.get("https://v1.hitokoto.cn/").then(hitokoto => {
                    main.hitokoto = hitokoto.data;
                });

            }
        });
        // $.post("/api/home_page").done(ctx => {
        //     ctx = JSON.parse(ctx);
        //     if (ctx.code) {
        //         showErrorModal(ctx.message);
        //         return;
        //     }
        //     main.data = ctx.data;
        //     main.done = true;
        // });
    });
</script>
<div id="main" v-if="done">
    <div class="ui left aligned container" style="padding-bottom: 20px;">
        <h1>{[data.app_name]}</h1>
    </div>
    <div class="ui divider"></div>
    <div class="ui two column grid">
        <div class="ui row">
            <div class="ui eleven wide column">
                <div class="ui header">
                    <h2>公告</h2>
                </div>
                <div class="ui segment stacked">
                    <table class="ui very basic celled table">
                        <thead>
                            <tr>
                                <th>标题</th>
                                <th>时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="min-width: 300px;" v-for="item in data.broadcasts">
                                <td>
                                    <a :href="'/show_discussion/'+item.id"> {[item.title]}
                                    </a>
                                </td>
                                <td>
                                    {[item.time]}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="ui right aligned container">
                        <a href="/discussions/broadcast/1">全部公告..</a>
                    </div>
                </div>
                <div class="ui header">
                    <h2>排名</h2>
                </div>
                <div class="ui segment stacked">
                    <table class="ui very basic celled table">
                        <thead>
                            <tr>
                                <th class="center aligned">用户名</th>
                                <th class="center aligned">个人签名</th>
                                <th class="center aligned">Rating</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data.ranklist">
                                <td class="center aligned">
                                    <a :href="'/profile/'+item.id">{[item.username]}</a>
                                </td>
                                <td class="center aligned">
                                    <div v-html="makeHTML(item.description)"
                                        style="max-height: 50px;overflow-y: hidden;overflow-x: hidden;max-width: 700px;">
                                    </div>
                                </td>
                                <td class="center aligned">
                                    {[item.rating]}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="ui right aligned container">
                        <a href="/ranklist/1" target="_blank">查看更多..</a>
                    </div>
                </div>
            </div>
            <div class="ui five wide column">
                <div class="ui header">
                    <h2>Hitokoto</h2>
                </div>
                <div class="ui segment stacked" v-if="hitokoto">
                    <div class="ui center aligned container" style="font-size: 15px;min-height: 50px;">
                        {[hitokoto.hitokoto]}
                    </div>
                    <div class="ui right aligend container" style="text-align: right">
                        {[hitokoto.from]}

                    </div>
                    <div class="ui right aligend container" style="text-align: right">
                        <a :href="'https://hitokoto.cn?id='+hitokoto.id">{[hitokoto.id]}</a>
                    </div>
                </div>
                <div class="ui header">
                    <h2>近期题目</h2>
                </div>
                <div class="ui segment stacked">
                    <table class="ui very basic celled table">
                        <thead>
                            <tr>
                                <th class="center aligned">题目名</th>
                                <th class="center aligned">时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data.recent_problems">
                                <td class="center aligned">
                                    <a :href="'/show_problem/'+item.id">{[item.title]}</a>
                                </td>
                                <td class="center aligned">
                                    {[item.create_time]}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="ui header">
                    <h2>近期讨论</h2>
                </div>
                <div class="ui segment stacked">
                    <table class="ui very basic celled table">
                        <thead>
                            <tr>
                                <th class="center aligned">标题</th>
                                <th class="center aligned">时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in data.discussions">
                                <td class="center aligned">
                                    <a :href="'/show_discussion/'+item.id">{[item.title]}</a>
                                </td>
                                <td class="center aligned">
                                    {[item.time]}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="ui header">
                    <h2>友情链接</h2>
                </div>
                <div class="ui stacked segment">
                    <div class="ui list">
                        <a v-for="item in data.friend_links" class="item" :href="item.url">{[item.name]}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{%endblock%}